// 用户界面相关功能实现

use super::app::FeatureTester;
use eframe::egui;

impl FeatureTester {
    // UI组件标签页
    pub fn render_ui_components_tab(&mut self, ui: &mut egui::Ui) {
        ui.heading("UI组件库");

        ui.add_space(10.0);
        ui.label("这个标签页展示了RustBrowser中可用的UI组件");

        ui.add_space(15.0);
        ui.collapsing("基础组件", |ui| {
            ui.add_space(5.0);

            // 按钮组件示例
            ui.heading("按钮");
            ui.horizontal(|ui| {
                ui.label("标准按钮:");
                if ui.button("标准按钮").clicked() {
                    self.ui_demo_output = "点击了标准按钮".to_string();
                }

                if ui.button("主按钮").clicked() {
                    self.ui_demo_output = "点击了主按钮".to_string();
                }

                ui.add_enabled_ui(false, |ui| {
                    if ui.button("禁用按钮").clicked() {
                        // 这永远不会被执行
                    }
                });
            });

            ui.add_space(10.0);

            // 文本输入组件示例
            ui.heading("文本输入");
            ui.horizontal(|ui| {
                ui.label("单行文本:");
                ui.text_edit_singleline(&mut self.ui_demo_text);
            });

            ui.horizontal(|ui| {
                ui.label("多行文本:");
                ui.add(
                    egui::TextEdit::multiline(&mut self.ui_demo_multiline_text)
                        .desired_width(250.0)
                        .desired_rows(3),
                );
            });

            ui.add_space(10.0);

            // 复选框和单选按钮示例
            ui.heading("复选框和单选按钮");
            ui.horizontal(|ui| {
                ui.checkbox(&mut self.ui_demo_checkbox, "启用高级选项");

                ui.add_space(20.0);

                ui.radio_value(&mut self.ui_demo_radio, 0, "选项A");
                ui.radio_value(&mut self.ui_demo_radio, 1, "选项B");
                ui.radio_value(&mut self.ui_demo_radio, 2, "选项C");
            });

            ui.add_space(10.0);

            // 滑块和进度条示例
            ui.heading("滑块和进度条");
            ui.horizontal(|ui| {
                ui.label("滑块:");
                ui.add(egui::Slider::new(&mut self.ui_demo_slider, 0..=100).text("%"));
            });

            ui.horizontal(|ui| {
                ui.label("进度条:");
                ui.add(
                    egui::ProgressBar::new(self.ui_demo_slider as f32 / 100.0)
                        .show_percentage()
                        .animate(true),
                );
            });

            ui.add_space(10.0);

            // 下拉菜单示例
            ui.heading("下拉菜单");
            ui.horizontal(|ui| {
                ui.label("选择一个选项:");
                egui::ComboBox::from_id_source("ui_demo_combo")
                    .selected_text(self.ui_demo_combo_selected.clone())
                    .show_ui(ui, |ui| {
                        ui.selectable_value(
                            &mut self.ui_demo_combo_selected,
                            "选项1".to_string(),
                            "选项1",
                        );
                        ui.selectable_value(
                            &mut self.ui_demo_combo_selected,
                            "选项2".to_string(),
                            "选项2",
                        );
                        ui.selectable_value(
                            &mut self.ui_demo_combo_selected,
                            "选项3".to_string(),
                            "选项3",
                        );
                        ui.selectable_value(
                            &mut self.ui_demo_combo_selected,
                            "选项4".to_string(),
                            "选项4",
                        );
                    });
            });
        });

        ui.add_space(15.0);
        ui.collapsing("高级组件", |ui| {
            ui.add_space(5.0);

            // 选项卡示例
            ui.heading("选项卡");
            egui::TopBottomPanel::top("tabs_panel").show_inside(ui, |ui| {
                ui.horizontal(|ui| {
                    if ui
                        .selectable_label(self.ui_demo_tab == 0, "选项卡 1")
                        .clicked()
                    {
                        self.ui_demo_tab = 0;
                    }
                    if ui
                        .selectable_label(self.ui_demo_tab == 1, "选项卡 2")
                        .clicked()
                    {
                        self.ui_demo_tab = 1;
                    }
                    if ui
                        .selectable_label(self.ui_demo_tab == 2, "选项卡 3")
                        .clicked()
                    {
                        self.ui_demo_tab = 2;
                    }
                });
            });

            ui.separator();

            match self.ui_demo_tab {
                0 => {
                    ui.label("这是选项卡1的内容。");
                }
                1 => {
                    ui.label("这是选项卡2的内容。包含了其他信息。");
                }
                2 => {
                    ui.label("这是选项卡3的内容。这里可以放置更复杂的UI元素。");
                }
                _ => { /* 默认情况下不做任何事情 */ }
            }

            ui.add_space(10.0);

            // 表格示例
            ui.heading("表格");
            egui::Grid::new("ui_demo_grid")
                .num_columns(3)
                .spacing([10.0, 5.0])
                .striped(true)
                .show(ui, |ui| {
                    ui.strong("名称");
                    ui.strong("类型");
                    ui.strong("大小");
                    ui.end_row();

                    ui.label("document.html");
                    ui.label("HTML文件");
                    ui.label("15 KB");
                    ui.end_row();

                    ui.label("image.png");
                    ui.label("图片文件");
                    ui.label("256 KB");
                    ui.end_row();

                    ui.label("script.js");
                    ui.label("JavaScript文件");
                    ui.label("5 KB");
                    ui.end_row();

                    ui.label("style.css");
                    ui.label("CSS文件");
                    ui.label("8 KB");
                    ui.end_row();
                });

            ui.add_space(10.0);

            // 树形结构示例
            ui.heading("树形结构");

            ui.collapsing("根文件夹", |ui| {
                ui.collapsing("图片", |ui| {
                    ui.label("image1.png");
                    ui.label("image2.jpg");
                    ui.label("banner.gif");
                });

                ui.collapsing("文档", |ui| {
                    ui.label("report.pdf");
                    ui.collapsing("项目", |ui| {
                        ui.label("spec.md");
                        ui.label("todo.txt");
                    });
                });

                ui.label("index.html");
                ui.label("style.css");
            });

            ui.add_space(10.0);

            // 颜色选择器示例
            ui.heading("颜色选择器");
            ui.horizontal(|ui| {
                ui.label("选择颜色:");
                if ui.color_edit_button_rgb(&mut self.ui_demo_color).changed() {
                    self.ui_demo_output = format!(
                        "选择了颜色: RGB({}, {}, {})",
                        (self.ui_demo_color[0] * 255.0) as u8,
                        (self.ui_demo_color[1] * 255.0) as u8,
                        (self.ui_demo_color[2] * 255.0) as u8
                    );
                }

                // 显示选中的颜色示例
                let color_rect = ui.allocate_space(egui::vec2(40.0, 20.0)).1;
                ui.painter().rect_filled(
                    color_rect,
                    2.0,
                    egui::Color32::from_rgb(
                        (self.ui_demo_color[0] * 255.0) as u8,
                        (self.ui_demo_color[1] * 255.0) as u8,
                        (self.ui_demo_color[2] * 255.0) as u8,
                    ),
                );
            });
        });

        ui.add_space(15.0);
        ui.collapsing("布局示例", |ui| {
            ui.add_space(5.0);

            // 水平和垂直布局
            ui.heading("布局");
            ui.label("水平布局:");
            ui.horizontal(|ui| {
                for i in 1..=5 {
                    let rect = ui.allocate_space(egui::vec2(40.0, 30.0)).1;
                    ui.painter().rect_filled(
                        rect,
                        3.0,
                        egui::Color32::from_rgb(
                            (50 * i) as u8,
                            (20 + 30 * i) as u8,
                            (100 + 20 * i) as u8,
                        ),
                    );
                    ui.painter().text(
                        rect.center(),
                        egui::Align2::CENTER_CENTER,
                        i.to_string(),
                        egui::FontId::default(),
                        egui::Color32::WHITE,
                    );
                }
            });

            ui.add_space(10.0);
            ui.label("垂直布局:");
            for i in 1..=3 {
                ui.horizontal(|ui| {
                    let rect = ui.allocate_space(egui::vec2(40.0, 30.0)).1;
                    ui.painter().rect_filled(
                        rect,
                        3.0,
                        egui::Color32::from_rgb(
                            (120 + 40 * i) as u8,
                            (60 + 20 * i) as u8,
                            (20 * i) as u8,
                        ),
                    );
                    ui.painter().text(
                        rect.center(),
                        egui::Align2::CENTER_CENTER,
                        i.to_string(),
                        egui::FontId::default(),
                        egui::Color32::WHITE,
                    );

                    ui.label(format!("这是第{}行的内容", i));
                });
            }

            ui.add_space(10.0);

            // 分割面板示例
            ui.heading("分割面板");
            let (rect, _) = ui.allocate_exact_size(
                egui::vec2(ui.available_width(), 150.0),
                egui::Sense::hover(),
            );

            // 左右分割面板
            let split_pos = rect.min.x + 0.3 * rect.width();

            // 左侧面板
            let left_panel = egui::Rect::from_min_max(rect.min, egui::pos2(split_pos, rect.max.y));
            ui.painter()
                .rect_filled(left_panel, 2.0, egui::Color32::from_rgb(240, 240, 240));
            ui.painter().text(
                left_panel.center(),
                egui::Align2::CENTER_CENTER,
                "左侧面板",
                egui::FontId::proportional(14.0),
                egui::Color32::BLACK,
            );

            // 分隔线
            ui.painter().line_segment(
                [
                    egui::pos2(split_pos, rect.min.y),
                    egui::pos2(split_pos, rect.max.y),
                ],
                egui::Stroke::new(2.0, egui::Color32::GRAY),
            );

            // 右侧面板
            let right_panel = egui::Rect::from_min_max(egui::pos2(split_pos, rect.min.y), rect.max);
            ui.painter()
                .rect_filled(right_panel, 2.0, egui::Color32::from_rgb(230, 230, 230));
            ui.painter().text(
                right_panel.center(),
                egui::Align2::CENTER_CENTER,
                "右侧面板",
                egui::FontId::proportional(14.0),
                egui::Color32::BLACK,
            );
        });

        ui.add_space(15.0);
        ui.collapsing("响应式设计", |ui| {
            ui.add_space(5.0);

            ui.heading("响应式UI组件");
            ui.label("这些组件会根据可用空间自动调整其布局");

            // 展示窗口当前尺寸
            let available_width = ui.available_width();
            ui.label(format!("当前面板宽度: {:.1} 像素", available_width));

            ui.add_space(5.0);

            // 响应式卡片布局
            let card_count = if available_width > 600.0 {
                3
            } else if available_width > 400.0 {
                2
            } else {
                1
            };
            let card_width =
                (available_width - (card_count as f32 - 1.0) * 10.0) / card_count as f32;

            ui.horizontal(|ui| {
                for i in 0..card_count {
                    ui.vertical(|ui| {
                        let (rect, _) = ui.allocate_exact_size(
                            egui::vec2(card_width, 100.0),
                            egui::Sense::hover(),
                        );

                        ui.painter()
                            .rect_filled(rect, 8.0, egui::Color32::from_rgb(240, 240, 250));

                        ui.painter().rect_stroke(
                            rect,
                            8.0,
                            egui::Stroke::new(1.0, egui::Color32::from_rgb(200, 200, 220)),
                        );

                        ui.painter().text(
                            egui::pos2(rect.min.x + 10.0, rect.min.y + 20.0),
                            egui::Align2::LEFT_TOP,
                            format!("卡片 {}", i + 1),
                            egui::FontId::proportional(18.0),
                            egui::Color32::BLACK,
                        );

                        ui.painter().text(
                            egui::pos2(rect.min.x + 10.0, rect.min.y + 50.0),
                            egui::Align2::LEFT_TOP,
                            "响应式卡片组件",
                            egui::FontId::proportional(14.0),
                            egui::Color32::DARK_GRAY,
                        );
                    });

                    if i < card_count - 1 {
                        ui.add_space(10.0);
                    }
                }
            });
        });

        ui.add_space(15.0);

        // 输出区域
        ui.separator();
        if !self.ui_demo_output.is_empty() {
            ui.heading("交互输出");
            ui.label(&self.ui_demo_output);

            if ui.button("清除输出").clicked() {
                self.ui_demo_output.clear();
            }
        }
    }
}
